Tüpograafilise Võimsuse Vabastamine: Põhjalik Ülevaade CSS-i Fondiomaduste Väärtustest ja OpenType'ist

Veebidisaini maailmas on tüpograafia sageli kasutajakogemuse nähtamatu kangelane. Valime hoolikalt fondiperesid, -raskusi ja -suurusi, et luua selge ja esteetiliselt meeldiv kasutajaliides. Aga mis siis, kui saaksime minna sügavamale? Mis siis, kui fondifailid, mida me iga päev kasutame, peidaksid endas saladusi rikkalikumaks, väljendusrikkamaks ja professionaalsemaks tüpograafiaks? Tõde on, et nad peidavadki. Neid saladusi nimetatakse OpenType'i funktsioonideks ja CSS annab meile võtmed nende avamiseks.

Liiga kaua tundusid trükidisainerite käsutuses olevad nüansirikkad võimalused – nagu tõelised kapiteelkirjad (small caps), elegantsed tingimuslikud ligatuurid ja kontekstipõhised numbristiilid – veebis kättesaamatud. Tänaseks see enam nii ei ole. See põhjalik juhend viib teid rännakule CSS-i fondiomaduste väärtuste maailma, uurides, kuidas saate oma veebifontide täielikku potentsiaali rakendada, et luua tõeliselt viimistletud ja loetavaid digitaalseid kogemusi.

Mis täpselt on OpenType'i funktsioonid?

Enne kui süveneme CSS-i, on oluline mõista, mida me kontrollime. OpenType on fondiformaat, mis võib sisaldada tohutul hulgal andmeid lisaks tähtede, numbrite ja sümbolite põhikujudele. Nende andmete sisse saavad fondidisainerid lisada laia valiku valikulisi võimekusi, mida nimetatakse "funktsioonideks".

Mõelge nendest funktsioonidest kui sisseehitatud juhistest või alternatiivsetest märgikujudest (glüüfidest), mida saab programmiliselt sisse või välja lülitada. Need ei ole häkid ega brauseritrikid; need on fondi loonud tüpograafi teadlikud disainivalikud. Kui aktiveerite OpenType'i funktsiooni, palute brauseril kasutada fondi disaini kindlat osa, mis on mõeldud konkreetseks otstarbeks.

Nende funktsioonide ulatus võib olla puhtalt funktsionaalsest, nagu loetavuse parandamine parema vahekaugusega, kuni puhtalt esteetiliseni, nagu dekoratiivse elemendi lisamine pealkirjale.

CSS-i lüüs: Kõrgetasemelised atribuudid ja madalatasemeline kontroll

CSS pakub OpenType'i funktsioonidele juurdepääsuks kahte peamist viisi. Kaasaegne, eelistatud lähenemine on kasutada kõrgetasemeliste, semantiliste atribuutide kogumit. Siiski on olemas ka madalatasemeline, võimas "kõik-ühes" atribuut, kui vajate maksimaalset kontrolli.

Eelistatud meetod: Kõrgetasemelised atribuudid

Kaasaegne CSS pakub mitmeid atribuute `font-variant` katuse all, lisaks `font-kerning`. Neid peetakse parimaks tavaks, sest nende nimed kirjeldavad selgelt nende eesmärki, muutes teie koodi loetavamaks ja hooldatavamaks.

• font-kerning: Kontrollib fondi salvestatud kerningu-info kasutamist.
• font-variant-ligatures: Kontrollib tavalisi, tingimuslikke, ajaloolisi ja kontekstuaalseid ligatuure.
• font-variant-numeric: Kontrollib erinevaid stiile numbritele, murdudele ja läbikriipsutatud nullile.
• font-variant-caps: Kontrollib suurtähtede variatsioone, näiteks kapiteelkirju (small caps).
• font-variant-alternates: Annab juurdepääsu stilistilistele alternatiividele ja märgivariantidele.

Nende atribuutide peamine eelis on see, et te ütlete brauserile mida te soovite saavutada (nt `font-variant-caps: small-caps;`), ja brauser mõtleb välja parima viisi selle teostamiseks. Kui konkreetne funktsioon pole saadaval, saab brauser sellega sujuvalt hakkama.

Võimas tööriist: `font-feature-settings`

Kuigi kõrgetasemelised atribuudid on suurepärased, ei kata need kõiki saadaolevaid OpenType'i funktsioone. Täieliku kontrolli saavutamiseks on meil madalatasemeline atribuut `font-feature-settings`. Seda kirjeldatakse sageli kui viimase abinõu tööriista, kuid see on uskumatult võimas.

Süntaks näeb välja selline:

font-feature-settings: "" , "" ;

• Funktsiooni silt (Feature Tag): Tõstutundlik, neljatäheline string, mis identifitseerib konkreetse OpenType'i funktsiooni (nt `"liga"`, `"smcp"`, `"ss01"`).
• Väärtus: Tavaliselt täisarv. Paljude funktsioonide puhul tähendab `1` "sisse lülitatud" ja `0` "välja lülitatud". Mõned funktsioonid, nagu stilistilised komplektid, võivad aktsepteerida teisi täisarvulisi väärtusi konkreetse variandi valimiseks.

Kuldreegel: Proovige alati esmalt kasutada kõrgetasemelisi `font-variant-*` atribuute. Kui vajalik funktsioon ei ole nende kaudu kättesaadav või kui peate funktsioone kombineerima viisil, mida kõrgetasemelised atribuudid ei võimalda, siis kasutage `font-feature-settings` atribuuti.

Praktiline ülevaade levinud OpenType'i funktsioonidest

Uurime mõningaid kõige kasulikumaid ja huvitavamaid OpenType'i funktsioone, mida saate CSS-iga kontrollida. Igaühe puhul käsitleme selle eesmärki, neljatähelist silti ja CSS-i selle aktiveerimiseks.

Kategooria 1: Ligatuurid - Tähemärkide graatsiline ühendamine

Ligatuurid on spetsiaalsed glüüfid, mis ühendavad kaks või enam tähemärki üheks, harmoonilisemaks kujuks. Need on olulised, et vältida ebamugavaid tähemärkide kokkupõrkeid ja parandada teksti voolavust.

Standardsed ligatuurid

• Silt: `liga`
• Eesmärk: Asendada tavalised, problemaatilised tähekombinatsioonid nagu `fi`, `fl`, `ff`, `ffi` ja `ffl` ühe, spetsiaalselt disainitud glüüfiga. See on paljude fontide puhul loetavuse seisukohalt fundamentaalne omadus.
• Kõrgetasemeline CSS: `font-variant-ligatures: common-ligatures;` (brauserites sageli vaikimisi sisse lülitatud)
• Madalatasemeline CSS: `font-feature-settings: "liga" 1;`

Tingimuslikud ligatuurid

• Silt: `dlig`
• Eesmärk: Need on dekoratiivsemad ja stilistilisemad ligatuurid, näiteks kombinatsioonidele nagu `ct`, `st` või `sp`. Need ei ole loetavuse jaoks hädavajalikud ja neid tuleks kasutada valikuliselt, sageli pealkirjades või logodes, et lisada elegantsi.
• Kõrgetasemeline CSS: `font-variant-ligatures: discretionary-ligatures;`
• Madalatasemeline CSS: `font-feature-settings: "dlig" 1;`

Kategooria 2: Numbrid - Õige number õigeks otstarbeks

Kõik numbrid ei ole loodud võrdsetena. Hea font pakub erinevates kontekstides kasutamiseks erinevaid numbristiile ja nende kontrollimine on professionaalse tüpograafia tunnus.

Vanaaegsed vs. ühtlase kõrgusega numbrid

• Sildid: `onum` (vanaaegsed), `lnum` (ühtlase kõrgusega)
• Eesmärk: Ühtlase kõrgusega numbrid on standardsed numbrid, mida näeme kõikjal – kõik ühtlase kõrgusega, joondudes suurtähtedega. Need sobivad ideaalselt tabelitesse, graafikutesse ja kasutajaliidestesse, kus numbrid peavad vertikaalselt joonduma. Vanaaegsetel numbritel on seevastu erinevad kõrgused üla- ja alapikenditega, sarnaselt väiketähtedele. See võimaldab neil sulanduda sujuvalt tekstilõiku, ilma et nad tähelepanu rööviksid.
• Kõrgetasemeline CSS: `font-variant-numeric: oldstyle-nums;` või `font-variant-numeric: lining-nums;`
• Madalatasemeline CSS: `font-feature-settings: "onum" 1;` või `font-feature-settings: "lnum" 1;`

Proportsionaalsed vs. tabelnumbrid

• Sildid: `pnum` (proportsionaalsed), `tnum` (tabel)
• Eesmärk: See kontrollib numbrite laiust. Tabelnumbrid on püsisammuga – iga number võtab täpselt sama palju horisontaalset ruumi. See on ülioluline finantsaruannete, koodi või mis tahes andmetabeli puhul, kus eri ridades olevad numbrid peavad veergudes ideaalselt joonduma. Proportsionaalsetel numbritel on muutuv laius; näiteks number '1' võtab vähem ruumi kui number '8'. See loob ühtlasema vahekauguse ja sobib ideaalselt jooksvas tekstis kasutamiseks.
• Kõrgetasemeline CSS: `font-variant-numeric: proportional-nums;` või `font-variant-numeric: tabular-nums;`
• Madalatasemeline CSS: `font-feature-settings: "pnum" 1;` või `font-feature-settings: "tnum" 1;`

Murrud ja läbikriipsutatud null

• Sildid: `frac` (murrud), `zero` (läbikriipsutatud null)
• Eesmärk: Funktsioon `frac` vormindab kaunilt teksti nagu `1/2` tõeliseks diagonaalseks murruglüüfiks (½). Funktsioon `zero` asendab standardse '0' versiooniga, millel on kaldkriips või punkt sees, et seda selgelt eristada suurtähest 'O', mis on elutähtis tehnilises dokumentatsioonis, seerianumbrites ja koodis.
• Kõrgetasemeline CSS: `font-variant-numeric: diagonal-fractions;` ja `font-variant-numeric: slashed-zero;`
• Madalatasemeline CSS: `font-feature-settings: "frac" 1, "zero" 1;`

Kategooria 3: Kerning - Tühikute kunst

Kerning

• Silt: `kern`
• Eesmärk: Kerning on üksikute tähepaaride vahelise ruumi kohandamise protsess visuaalse atraktiivsuse ja loetavuse parandamiseks. Näiteks kombinatsioonis "AV" on V veidi A alla lükatud. Enamik kvaliteetseid fonte sisaldab sadu või tuhandeid selliseid kerningu paare. Kuigi see on peaaegu alati vaikimisi lubatud, saate seda kontrollida.
• Kõrgetasemeline CSS: `font-kerning: normal;` (vaikimisi) või `font-kerning: none;`
• Madalatasemeline CSS: `font-feature-settings: "kern" 1;` (sisse) või `font-feature-settings: "kern" 0;` (välja)

Kategooria 4: Täheregistri variatsioonid - Rohkem kui suur- ja väiketähed

Kapiteelkirjad (Small Caps)

• Sildid: `smcp` (väiketähtedest), `c2sc` (suurtähtedest)
• Eesmärk: See funktsioon võimaldab tõelisi kapiteelkirju, mis on spetsiaalselt disainitud glüüfid, mis on väiketähtede kõrgused, kuid millel on suurtähtede kuju. Need on palju paremad kui "võltsitud" kapiteelkirjad, mis on loodud lihtsalt täissuuruses suurtähtede vähendamisega. Kasutage neid akronüümide, alapealkirjade või rõhutamiseks.
• Kõrgetasemeline CSS: `font-variant-caps: small-caps;`
• Madalatasemeline CSS: `font-feature-settings: "smcp" 1;`

Kategooria 5: Stilistilised alternatiivid - Disaineri puudutus

Siin muutub tüpograafia tõeliselt väljendusrikkaks. Paljud fondid on varustatud tähemärkide alternatiivsete versioonidega, mida saate sisse vahetada, et muuta teksti tooni või stiili.

Stilistilised komplektid

• Sildid: `ss01` kuni `ss20`
• Eesmärk: See on üks põnevamaid funktsioone, kuid see on kättesaadav ainult `font-feature-settings` kaudu. Fondidisainer saab grupeerida seotud stilistilised alternatiivid komplektideks. Näiteks `ss01` võib aktiveerida ühekorruselise 'a', `ss02` võib muuta 'y' saba ja `ss03` võib pakkuda geomeetrilisemat kirjavahemärkide komplekti. Võimalused sõltuvad täielikult fondidisainerist.
• Madalatasemeline CSS: `font-feature-settings: "ss01" 1;` või `font-feature-settings: "ss01" 1, "ss05" 1;`

Kaunistused (Swashes)

• Silt: `swsh`
• Eesmärk: Kaunistused on dekoratiivsed, toretsevad lisandid tähemärkidele, sageli sõna alguses või lõpus. Need on levinud skript- ja disainifontides ning neid tuleks kasutada väga säästlikult maksimaalse mõju saavutamiseks, näiteks initsiaali või ühe sõna puhul logos.
• Madalatasemeline CSS: `font-feature-settings: "swsh" 1;`

Kuidas avastada fondis saadaolevaid funktsioone

See kõik on imeline, aga kuidas teada saada, milliseid funktsioone teie valitud font tegelikult toetab? Funktsioon töötab ainult siis, kui fondidisainer on selle fondifaili sisse ehitanud. Siin on mõned viisid, kuidas seda teada saada:

1. Fonditeenuste näidislehed: Enamik mainekaid fondikodasid ja -teenuseid (nagu Adobe Fonts, Google Fonts ja kommertslikud fondikojad) loetlevad ja demonstreerivad toetatud OpenType'i funktsioone fondi põhilehel. See on tavaliselt kõige lihtsam koht alustamiseks.
2. Brauseri arendaja tööriistad: Kaasaegsetel brauseritel on selleks suurepärased tööriistad. Chrome'is või Firefoxis inspekteerige elementi, minge vahekaardile "Computed" ja kerige lõpuni alla. Leiate jaotise "Rendered Fonts", mis ütleb teile, millist fondifaili kasutatakse. Firefoxis on eraldi vahekaart "Fonts", mis loetleb selgesõnaliselt kõik valitud elemendi fondi jaoks saadaolevad OpenType'i funktsioonide sildid. See on uskumatult võimas viis fondi võimekuste reaalajas uurimiseks.
3. Töölaua fondianalüüsi tööriistad: Kohalikult installitud fondifailide (`.otf`, `.ttf`) jaoks saate kasutada spetsiaalseid rakendusi või veebisaite (nagu wakamaifondue.com), mis analüüsivad fondifaili ja annavad teile üksikasjaliku aruande kõigist selle funktsioonidest, toetatud keeltest ja glüüfidest.

Jõudlus ja brauseritugi

Kaks levinud muret on jõudlus ja brauserite ühilduvus. Hea uudis on see, et mõlemad on suurepärased.

• Brauseritugi: Atribuut `font-feature-settings` on olnud laialdaselt toetatud kõigis suuremates brauserites juba aastaid. Uuematel `font-variant-*` atribuutidel on samuti suurepärane tugi kõikjal. Saate neid julgelt kasutada.
• Jõudlus: OpenType'i funktsioonide aktiveerimisel on renderdamise jõudlusele tühine mõju. Loogika ja alternatiivsed glüüfid on juba alla laaditud fondifailis; te lihtsalt ütlete brauseri renderdusmootorile, milliseid juhiseid järgida. Jõudluskulu peitub fondifaili suuruses endas, mitte selles sisalduvate funktsioonide kasutamises. Paljude funktsioonidega font võib olla suurem fail, kuid nende aktiveerimine on sisuliselt tasuta.

Parimad tavad ja praktilised nõuanded

Suure võimuga kaasneb suur vastutus. Siin on, kuidas fondi funktsioone tõhusalt ja professionaalselt kasutada.

1. Kasutage funktsioone järkjärguliseks täiustamiseks

Mõelge OpenType'i funktsioonidest kui täiustusest. Teie tekst peab olema täiesti loetav ja funktsionaalne ka ilma nendeta. Vanaaegsete numbrite või tingimuslike ligatuuride aktiveerimine lihtsalt tõstab tüpograafilist kvaliteeti kaasaegsete brauseritega kasutajate jaoks, luues parema ja lihvituma kogemuse.

2. Kontekst on kõik

Ärge rakendage funktsioone globaalselt ilma läbimõtlemata. Rakendage õiget funktsiooni õiges kohas.

• Kasutage vanaaegseid proportsionaalseid numbreid tekstilõikudes.
• Kasutage ühtlase kõrgusega tabelnumbreid andmetabelites ja hinnakirjades.
• Kasutage tingimuslikke ligatuure ja kaunistusi suures kirjas pealkirjades, mitte põhitekstis.
• Kasutage kapiteelkirju akronüümide või siltide jaoks, et aidata neil paremini sulanduda.

3. Korraldage CSS-i kohandatud atribuutidega

Et hoida oma kood puhas ja hooldatav, defineerige oma funktsioonide kombinatsioonid CSS-i kohandatud atribuutides (muutujates). See muudab nende järjepideva rakendamise ja ühest kesksest asukohast uuendamise lihtsaks.

Näide:

            
:root {
  --font-features-body: "liga" 1, "onum" 1, "pnum" 1, "kern" 1;
  --font-features-heading: "liga" 1, "dlig" 1, "lnum" 1;
  --font-features-data: "lnum" 1, "tnum" 1, "zero" 1;
}

body {
  font-feature-settings: var(--font-features-body);
}

h1, h2, h3 {
  font-feature-settings: var(--font-features-heading);
}

.price, .code, .table-cell {
  font-feature-settings: var(--font-features-data);
}

            

              
                Copy
              
            
          

4. Peenus on võti

Parim tüpograafia on sageli nähtamatu. Eesmärk on parandada loetavust ja esteetikat, ilma et tehnikale endale tähelepanu tõmmataks. Vältige kiusatust lülitada sisse kõik saadaolevad funktsioonid. Mõned hästi valitud funktsioonid, mida rakendatakse õiges kontekstis, omavad palju suuremat mõju kui kõigi funktsioonide kaootiline segu.

Kokkuvõte: Veebitüpograafia uus piir

CSS-i fondiomaduste väärtuste valdamine on iga veebiarendaja või disaineri jaoks transformatiivne samm. See viib meid kaugemale fondisuuruste ja -raskuste seadistamise põhitõdedest ning tõelise digitaalse tüpograafia valdkonda. Mõistes ja kasutades meie fontidesse põimitud rikkalikke funktsioone, saame ületada pikaajalise lõhe trüki- ja veebidisaini vahel, luues digitaalseid kogemusi, mis ei ole mitte ainult funktsionaalsed ja ligipääsetavad, vaid ka tüpograafiliselt kaunid ja viimistletud.

Nii et järgmine kord, kui valite projekti jaoks fondi, ärge sellega piirduge. Süvenege selle dokumentatsiooni, uurige seda oma brauseri arendaja tööriistadega ja avastage selle peidetud jõud. Katsetage ligatuuride, numbrite ja stilistiliste komplektidega. Teie tähelepanu nendele detailidele eristab teie tööd teistest ja aitab kaasa rafineerituma ja loetavama veebi loomisele kõigi jaoks.